<template>
  <div
    style="display: flex; align-items: center; margin: 10px 0"
    @click="$emit('update:currentSong', item)"
    :class="{
      active: currentSong && currentSong.id === item.id,
      playing: currentSong && currentSong.id === item.id && playing,
    }"
  >
    <h3 style="flex: 1">
      {{ item.name
      }}<i v-for="(a, i) in item.song ? item.song.alias : item.alia" :key="i">{{
        a
      }}</i>
    </h3>
    <div class="icon"></div>
  </div>
</template>

<script>
export default {
  props: ["item", "currentSong", "playing"],
};
</script>

<style lang="less" scoped>
.icon {
  width: 30px;
  height: 30px;
  background: gray;
  border-radius: 50%;
}
.active {
  .icon {
    background: red;
  }
  &.playing {
    .icon {
      background: green;
    }
  }
}
</style>